<template>
	<div style="overflow: hiden;" v-loading="listLoading">
		<div>
      <code>
        <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>
        备注：1、建议分辨率750px*375px; 2、最多支持上传5张；3、支持排序，排序值越大越靠前。<br>
        新增请上传图片，否则新增无效。
      </code>
			<div style="margin-left: 20px;">
				<el-button v-if="permission == 3" type="primary" @click="linkToAdd">新增</el-button>
	  			<el-button v-if="permission == 3" type="success" @click="setSort">重新排序</el-button>
				<span style="display: inline-block;width: 800px;text-align: right;">共有数据{{tableData.length}}条</span>
			</div>
		</div>
		<el-table :data="tableData" row-key="id" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"fit highlight-current-row class="table c-width100 color-222 family-PingFangSC-Regular font-s12">
      <el-table-column align="center" label="排序" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.sort}}</span>
        </template>
      </el-table-column>
      <el-table-column width="170"  align="center" label="链接商品">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :title="scope.row.name" :src="scope.row.avatar" class="width80 c-max-height60 c-verticalAlign-m"><br>
          <div :title="scope.row.name" class="c-text-ellipsis1 c-width90">
            {{scope.row.name}}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="300"  align="center" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.url" width="100"/>
          </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <b v-if="permission == 3" @click="chooseImg(scope.$index)">选择图片</b>
          <span class="color-409" v-if="scope.row.url && permission == 3">|</span>
          <b v-if="scope.row.url && permission == 3" @click="sort(scope.row.mbId, scope.$index)">排序</b>
          <span class="color-409"  v-if="scope.row.url && permission == 3">|</span>
          <b v-if="scope.row.url" @click="goodsChoose(scope.$index)">链接</b>
          <span class="color-409" v-if="permission == 3">|</span>
          <b v-if="permission == 3" @click="deleteSwiper(scope.row.mbId, scope.$index)">删除</b>
        </template>
      </el-table-column>
    </el-table>
    <image-cropper
      :width="750"
      :height="375"
      :url="URLAPI + '/common/mallBanners/imageUpload'"
      @close='closeBanner'
      @crop-upload-success="cropSuccessBanner"
      :key="imagecropperKey" v-show="imageBannerShow">
    </image-cropper>
    <goods v-if="goodsShow" @hideGoods="hideGoods" @save="save"></goods>
	</div>
</template>
<script>
import { mallBannerSave, delMallBanner } from '@/api/goods'
import ImageCropper from '@/components/ImageCropper'
import goods from '../components/goods'
export default {
  components: { ImageCropper, goods },
  props: ['tableData', 'permission'],
  data() {
    return {
      listLoading: false,
      dataNum: 3,
      imageBannerShow: false,
      imagecropperKey: 0,
      URLAPI: process.env.BASE_API,
      bannerIndex: null,
      goodsShow: false
    }
  },
  methods: {
    linkToAdd() {
      if (this.tableData.length >= 5) {
        this.$message({
          type: 'warning',
          message: '最多添加5张轮播图！'
        })
        return
      }
      // this.$router.push({ path: `/shop/createSwiper` })
      this.tableData.push({ mbId: null, companyId: null, url: null, link: null, sort: null })
    },
    chooseImg(index) {
      this.bannerIndex = index
      this.imageBannerShow = true
    },
    sort(mbId, index) { // 赠送积分
      this.$prompt('请输入', '排序', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(\-|\+?)\d+(\.\d+)?$/,
        inputErrorMessage: '请输入数字'
      }).then(({ value }) => {
        var data = { mbId: mbId, sort: value }
        mallBannerSave(data).then(res => {
          this.tableData[index].sort = value
          this.$message({
            type: 'success',
            message: '操作成功！'
          })
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    setSort() {
      this.$emit('sort')
    },
    cropSuccessBanner(resData) {
      if (resData.statusCode == 200) {
        this.imagecropperKey++
        var data = { mbId: this.tableData[this.bannerIndex].mbId, url: resData.data.imageUrl }
        this.listloading = true
        mallBannerSave(data).then(res => {
          this.listloading = false
          if (res.data.statusCode == 200) {
            this.tableData[this.bannerIndex].mbId = res.data.data
            this.$message({
              type: 'success',
              message: '操作成功！'
            })
          }
        }).catch(err => {
          this.listloading = false
          console.log(err)
        })

        this.tableData[this.bannerIndex].url = resData.data.imageUrl
        this.imageBannerShow = false
      }
    },
    closeBanner() {
      this.imageBannerShow = false
    },
    deleteSwiper(mbId, index) {
      if (!mbId) {
        this.tableData.splice(index, 1)
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = { mbId: mbId }
        this.listLoading = true
        delMallBanner(data).then(res => {
          this.listLoading = false
          if (res.data.statusCode == 200) {
            this.tableData.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        }).catch(err => {
          this.listLoading = false
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    goodsChoose(index) {
      this.goodsShow = true
      this.bannerIndex = index
    },
    save(info) {
      this.tableData[this.bannerIndex].avatar = info.avatar
      this.tableData[this.bannerIndex].name = info.goodsName
      var data = { mbId: this.tableData[this.bannerIndex].mbId, link: info.mgId }
      this.listLoading = true
      mallBannerSave(data).then(res => {
      	this.listLoading = false
        if (res.data.statusCode == 200) {
          console.log(res)
          this.goodsShow = false
          this.tableData[this.bannerIndex].mbId = res.data.data
          this.$message({
            type: 'success',
            message: '操作成功！'
          })
        }
      }).catch(err => {
      	this.listLoading = false
        console.log(err)
      })
    },
    hideGoods(msg) {
      this.goodsShow = msg
    }
  }
}
</script>

<style scoped>
	b{
		cursor: pointer;
		font-weight: 500;
    padding: 0 5px;
	}
	b:hover{
		color: #409EFF;
	}
	.block{
		padding: 20px 0;
	}
	.text-c{
		text-align: center;
	}
</style>
